<template>
  <div class="login_container">
    <img
      src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mix4/swiper_1_3.jpeg"
      class="image"
      style="width: 100%; height: 100%"
    />
    <div
      class="login_box"
      style="
        width: 450px;
        height: 300px;
        background-color: rgba(252, 252, 252, 0.616);
        position: absolute;
        left: 50%;
        top: 60%;
        transform: translate(-50%, -50%);
      "
    >
      <!--头像区域  -->
      <div
        class="avatar_box"
        style="
          height: 50px;
          width: 50px;
          border: 1px solid black;
          border-radius: 50%;
          padding: 10px;
          box-shadow: 0 0 10px #ddd;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: rgba(252, 252, 252, 0.616);
        "
      >
        <img
          src="@/assets/打脸.png"
          alt=""
          style="
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(252, 252, 252, 0.616);
          "
        />
      </div>

      <!-- 登陆表单区域 -->
      <div><el-link class="zczh" type="primary" @click="zc">没有账号?注册</el-link></div>
      <el-form
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        label-width="50px"
        class="login_form"
        style="
          position: absolute;
          bottom: 0;
          width: 100%;

          padding: 0 10px;

          box-sizing: border-box;
        "
      >
        <!-- 用户名 -->

        <el-form-item label="账号" prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="el-icon-star-on"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item
          class="btns"
          style="display: flex; justify-self: flex-end"
        >
          <el-button style="margin-left: 100px" type="primary" @click="login"
            >登录</el-button
          >
          <el-button type="info" @click="resetLoginForm">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  // 数据区
  data() {
    return {
      // 登录表单的数据绑定对象
      loginForm: {
        username: "admin",
        password: "admin_123456",
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          // trigger鼠标失去焦点事件
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10个字符", trigger: "blur" },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6到 15个字符", trigger: "blur" },
        ],
      },
    };
  },
  // 行为区
  methods: {
    // 登录
    login() {
      //表单预验证
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        this.axios({
          method: "POST",
          url: "http://localhost:3000/api/login",
          data: this.loginForm,
        }).then((reponse) => {
          if (reponse.data.code == "200") {
            this.$store.dispatch("login", reponse.data.data);
          } else if (reponse.data.code !== 200)
            return this.$message.error("账号或密码不正确");
          this.$message.success("登陆成功");
          console.log(reponse);
          window.sessionStorage.setItem("token", reponse.data.data.token);
          this.$router.push("/index");
        });
      });
    
    },

    // 点击重置按钮，重置登录表单
    resetLoginForm() {
      // (resetFields)表示重置
      this.$refs.loginFormRef.resetFields();
      // this.$router.push("/index");
    },
    //注册
      zc(){
        this.$router.replace("/register");
      }
  },
};
</script>
<style scoped>
.zczh {
  position: absolute;
  left: 340px;
  top: 20px;
}
</style>